<div class="stack">
{#each layers as layer, i}
  <label class="layer {layerName == layer ? 'selected' : ''}">
    <input type=radio bind:group=layerName value={layer}>
    <div class="thumb" style="position: relative;">
      <AtlasThumbnail grid={0} layerName={layer} {classHeatmap}/>
    </div>
    <span>{layer}</span>
  </label>
{/each}
</div>

<script>
  export default {
    components: {
      AtlasThumbnail: "../AtlasThumbnail.html"
    },
    data() { return {
      layerName: "mixed4c",
      layers: [
        "mixed3a",
        "mixed3b",
        "mixed4a",
        "mixed4b",
        "mixed4c",
        "mixed4d",
        "mixed4e",
        "mixed5a",
        "mixed5b",
      ],
      classHeatmap: -1
    }; }
  }
</script>

<style>
.layer {
  position: relative;
  cursor: pointer;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1.5fr;
  font-size: 11px;
  text-transform: uppercase;
  padding: 5px 16px 5px 16px;
  color: grey;
  border-left: solid 3px rgba(255, 255, 255, 0);
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}
.layer input {
  position: absolute;
  opacity: 0;
}
.layer span {
  margin-left: 8px;
}
.layer:hover {
  background-color: rgba(255, 130, 0, 0.04);
}
.layer.selected {
  border-left-color: rgb(255, 130, 0);
  color: rgb(255, 130, 0);
  background-color: rgba(255, 130, 0, 0.08);
  font-weight: bold;
}
.layer :global(canvas) {
  opacity: 0.5;
}
.layer.selected :global(canvas) {
  /* opacity: 1; */
}
.thumb {
  width: 30px;
  position: relative;
}
@media(min-width: 800px) {
  .thumb {
    width: 45px;
  }
}
</style>
